<template>
	<v-popup v-model:value="isPopupVisible" :title="title" :scrollHeight="scrollHeight" model="semicircle" @close="handleClose" @confirm="handleConfirm">
		<view class="drum-select-container">
			<view class="drum-select-content">
				<v-scroll-list
					:value="value.getFullYear()"
					:options="generateYearRange(props.maxDateTime.getFullYear(), props.minDateTime.getFullYear())"
					:scrollHeight="scrollHeight"
					@update:value="handleValueChangeYear($event)"
				/>
				<v-text class="separate-symbol">:</v-text>
				<v-scroll-list
					:value="value.getMonth() + 1"
					:options="generateMonthRange(props.maxDateTime.getMonth(), props.minDateTime.getMonth())"
					:scrollHeight="scrollHeight"
					@update:value="handleValueChangeMonth($event)"
				/>
				<v-text class="separate-symbol">:</v-text>
				<v-scroll-list
					:value="value.getDate()"
					:options="generateDateRange(props.maxDateTime.getDate(), props.minDateTime.getDate())"
					:scrollHeight="scrollHeight"
					@update:value="handleValueChangeDate($event)"
				/>
				<v-text class="separate-symbol">:</v-text>
				<v-scroll-list
					:value="hoursSystem ? value.getHours() || 24 : value.getHours() % 12 || 12"
					:options="generateHoursRange(props.maxDateTime.getHours(), props.minDateTime.getHours())"
					:scrollHeight="scrollHeight"
					@update:value="handleValueChangeHours($event)"
				/>
				<v-text class="separate-symbol">:</v-text>
				<v-scroll-list
					:value="value.getMinutes()"
					:options="generateMinutesRange(props.maxDateTime.getMinutes(), props.minDateTime.getMinutes())"
					:scrollHeight="scrollHeight"
					@update:value="handleValueChangeMinutes($event)"
				/>
				<v-text class="separate-symbol">:</v-text>
				<v-scroll-list
					:value="value.getSeconds()"
					:options="generateSecondsRange(props.maxDateTime.getSeconds(), props.minDateTime.getSeconds())"
					:scrollHeight="scrollHeight"
					@update:value="handleValueChangeSeconds($event)"
				/>
			</view>
		</view>
	</v-popup>
</template>

<script lang="ts" setup>
import { ref, computed, watch, inject } from 'vue';

interface DrumSelectPicker {
	value: any;
	label: string;
	children?: DrumSelectPicker[];
}
const props = defineProps({
	title: {
		type: String,
		default: '',
		required: true
	},
	scrollHeight: {
		type: Number,
		default: 400
	},
	value: {
		type: Date,
		default: new Date(),
		required: true
	},
	show: {
		type: Boolean,
		default: true
	},
	minDateTime: {
		type: Date,
		default: new Date('1000-1-1'),
		required: true
	},
	maxDateTime: {
		type: Date,
		default: new Date('9999-12-31'),
		required: true
	},
	hoursSystem: {
		type: Boolean,
		default: false
	}
});

const emit = defineEmits([
	'update:value',
	'handleValueChangeYear',
	'handleValueChangeMonth',
	'handleValueChangeDate',
	'handleValueChangeHours',
	'handleValueChangeMinutes',
	'handleValueChangeSeconds',
	'close',
	'confirm',
	'update:show'
]);

const isPopupVisible = ref(props.show);
const config = inject<any>('config');
function generateYearRange(maxYear: any, minYear: any) {
	const yearRange = [];
	for (let year = maxYear; year >= minYear; year--) {
		yearRange.push({
			value: year,
			label: `${year}`
		});
	}
	return yearRange;
}

function generateMonthRange(maxMonth: any, minMonth: any) {
	const monthRange = [];
	for (let month = maxMonth + 1; month > minMonth; month--) {
		monthRange.push({
			value: month,
			label: `${month}`
		});
	}
	return monthRange;
}

function generateDateRange(maxDate: any, minDate: any) {
	const dayRange = [];
	const daysInMonth = new Date(props.value.getFullYear(), props.value.getMonth() + 1, 0).getDate();
	const actualMaxDate = Math.min(maxDate, daysInMonth);
	for (let day = actualMaxDate; day >= minDate; day--) {
		dayRange.push({
			value: day,
			label: `${day}`
		});
	}
	return dayRange;
}

function generateHoursRange() {
	const hoursRange = [];
	if (props.hoursSystem) {
		// 24小时制
		for (let hour = 24; hour > 0; hour--) {
			hoursRange.push({
				value: hour,
				label: `${hour}`
			});
		}
	} else {
		// 12小时制
		for (let hour = 12; hour >= 1; hour--) {
			hoursRange.push({
				value: hour,
				label: `${hour}`
			});
		}
	}
	return hoursRange;
}

function generateMinutesRange() {
	const minutesRange = [];
	for (let minute = 60; minute > 0; minute--) {
		minutesRange.push({
			value: minute,
			label: `${minute < 10 ? '0' + minute : minute}`
		});
	}
	return minutesRange;
}

function generateSecondsRange() {
	const secondsRange = [];
	for (let second = 60; second > 0; second--) {
		secondsRange.push({
			value: second,
			label: `${second < 10 ? '0' + second : second}`
		});
	}
	return secondsRange;
}

const handleValueChangeYear = (year: number) => {
	props.value.setFullYear(year);
	emit('handleValueChangeYear', year);
};
const handleValueChangeMonth = (month: number) => {
	props.value.setMonth(month);
	emit('handleValueChangeMonth', month);
};
const handleValueChangeDate = (date: number) => {
	props.value.setDate(date);
	emit('handleValueChangeDate', date);
};
const handleValueChangeHours = (hours: number) => {
	props.value.setHours(hours);
	emit('handleValueChangeHours', hours);
};
const handleValueChangeMinutes = (minutes: number) => {
	props.value.setMinutes(minutes);
	emit('handleValueChangeMinutes', minutes);
};
const handleValueChangeSeconds = (seconds: number) => {
	props.value.setSeconds(seconds);
	emit('handleValueChangeSeconds', seconds);
};

watch(
	() => props.show,
	(val) => {
		isPopupVisible.value = val;
	}
);

const handleClose = () => {
	isPopupVisible.value = false;
	emit('update:show', false);
	emit('close', false);
};
const handleConfirm = () => {
	isPopupVisible.value = false;
	emit('update:show', false);
	emit('confirm', props.value);
};
</script>

<style lang="scss" scoped>
.drum-select-container {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.drum-select-content {
	position: relative;
	width: 100%;
	height: 60%;
	overflow: hidden;
	display: flex;
	view {
		flex: 1;
	}
}

.separate-symbol {
	font-size: v-bind("config.fontSize.mediumText");
	height: 85rpx;
	line-height: 85rpx !important;
	display: block !important;
	background-color: v-bind('config.VDateTime.backgroundColor');
	border-top: 1rpx solid v-bind('config.border.color');
	border-bottom: 1rpx solid v-bind('config.border.color');
}
</style>
